<template>
  <VueDragResize
    :isDraggable="false"
    :isActive="true"
    :sticks="['bm']"
    :w="375"
    :h="150"
    :minh="150"
    :preventActiveBehavior="true"
    class="drag"
  >
    <div class="listcon-title" v-show="comObj.freeStyle.checked">
      <span>{{comObj.freeStyle.moduleName}}</span>
      <br />
      <span v-show="comObj.freeStyle.subheadIpt" class="subhead">{{comObj.freeStyle.subhead}}</span>
    </div>
    <div class="listcon">
      <Container
        group-name="drag"
        @drop="onDrop('FreeData', $event)"
        :get-child-payload="getChildPayload2"
        :should-accept-drop="shouldAcceptDrop"
      >
        <template v-for="(item, idxchild) in FreeData">
          <Draggable :key="idxchild" style="min-height:50px" @click.native.stop="showSetCon(item.name)">
            <!--文本组件-->
            <VueDragResize
              :key="idxchild"
              :minw="1"
              :minh="1"
              v-if="item.name == 'DiyText'"
              :w="item.constyle.width"
              :x="item.constyle.left"
              :y="item.constyle.top"
              :h="item.constyle.height"
              :style="item.style"
            >{{item.data}}</VueDragResize>
            <!--按钮组件-->
            <VueDragResize
              :key="idxchild"
              :minw="1"
              :minh="1"
              v-if="item.name == 'DiyBtn'"
              :w="item.constyle.width"
              :x="item.constyle.left"
              :y="item.constyle.top"
              :h="item.constyle.height"
              :style="item.style"
            >{{item.data}}</VueDragResize>
            <!--图片组件-->
            <VueDragResize
              :key="idxchild"
              :minw="1"
              :minh="1"
              v-if="item.name == 'DiyImg'"
              :w="item.constyle.width"
              :x="item.constyle.left"
              :y="item.constyle.top"
              :h="item.constyle.height"
            >
              <img :src="item.data" :style="item.style" alt />
            </VueDragResize>
          </Draggable>
        </template>
      </Container>
    </div>
  </VueDragResize>
</template>
<script>
import VueDragResize from "vue-drag-resize";
import { Container, Draggable } from "vue-smooth-dnd";
import { initialdata } from "../initdata/initialdata.js";
export default {
  props: ["childCon", "comObj", "nowComIdx"],
  components: {
    Container,
    Draggable,
    VueDragResize
  },
  data() {
    return {
      FreeData: [
        {
          name: "DiyText",
          constyle: {
            left: 140,
            top: 12,
            width: 80,
            height: 28
          },
          style: {
            fontSize: "",
            color: "rgba(0, 206, 209, 1)",
            textDecoration: "none",
            fontStyle: "",
            fontWeight: "",
            textAlign: ""
          },
          key: "",
          data: "标题内容"
        },
        {
          name: "DiyBtn",
          constyle: {
            left: 284,
            top: 55,
            width: 80,
            height: 28
          },
          style: {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: "12px",
            background: "rgba(255,103,103,1)",
            borderRadius: "12px",
            textAlign: "center",
            lineHeight: "24px",
            color: "#ffffff"
          },
          data: "按钮"
        },
        {
          name: "DiyImg",
          constyle: {
            left: 10,
            top: 10,
            width: 120,
            height: 75
          },
          style: {
            width: "100%",
            height: "100%"
          },
          data:
            "https://zltc-1255680458.cos.ap-beijing.myqcloud.com/1570840775.jpg"
        }
      ],
      initialdatas: initialdata
    };
  },
  methods: {
    // 显示右侧设置内容
    showSetCon(name) {
      this.setComData(name);
    },
    setComData(val) {
      this.$emit("setComData", val);
    },
    onDrop(item, dropResult) {
      this[item] = this.applyDrag(this[item], dropResult);
      // 当前页面数据存入本地JSON
      // localStorage.setItem("page_json", JSON.stringify(this[item]));
      // // 设置当前页PageJSON内容
      // for (const i in this.AllPage_JSONCON) {
      //   if (this.AllPage_JSONCON[i].id === this.pageIdx) {
      //     this.AllPage_JSONCON[i].page_json = localStorage.getItem("page_json");
      //   }
      // }
      // this.$store.commit("apply/SET_PageJSON", this.AllPage_JSONCON);
    },
    // 组件拖拽到手机框
    applyDrag(arr, dragResult) {
      console.log(dragResult);
      const { removedIndex, addedIndex, payload } = dragResult;
      if (removedIndex === null && addedIndex === null) return arr;
      const result = [...arr];
      let itemToAdd = {};
      switch (payload.type) {
        case "DiyImg":
          itemToAdd = this.initialdatas.ImgObj;
          break;
        case "DiyText":
          itemToAdd = this.initialdatas.wordStyle;
          break;
        case "DiyBtn":
          itemToAdd = this.initialdatas.freeDtn;
          break;
        default:
          break;
      }

      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0];
      }

      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd);
      }
      return result;
    },
    getTextChildPayload(index) {
      return this.TextData[index];
    },
    // 组件落入检测
    shouldAcceptDrop(val, payload) {
      console.log(payload.type);
      if (payload.type === "DiyText" || payload.type === "DiyBtn" || payload.type === "DiyImg") {
        return true;
      } else {
        // this.$message.info("对不起,非文字、图片、按钮组件不得拖入自由容器..");
        return false;
      }
    },
    getChildPayload2(val) {
      console.log(val);
    }
  }
};
</script>
<style lang="scss" scoped>
.listcon {
  width: 100%;
  height: 150px;
  max-height: 150px;
}
.listcon-title {
  width: 100%;
  line-height: 38px;
  text-align: center;
  line-height: 38px;
  border-bottom: 1px solid #dfdfdf;
  text-align: center;
  .subhead {
    font-size: 12px;
    color: #a1a0a0;
    display: block;
    margin-top: -16px;
    line-height: 30px;
  }
}
</style>

<style lang="scss" >
.drag {
  .vdr-stick-bm {
    width: 378px !important;
    height: 1px !important;
    bottom: -1px !important;
    left: 0;
    opacity: 0 !important;
  }
}
</style>
